import React,{ Component } from 'react'
import {MineStyle,
    MineContainerTop,
    MineContainerMid,
    MineContainerFooter,
    MineContainerTopLogo,
    MineContainerTopLink,
    MineContainer
} from  './MineStyle'
import PickerViewExample from '../../components/common/address/Address'
import {Link} from 'react-router-dom'
 import cookie from '../../utils/cookie'
import BScroll from 'better-scroll'
import {Toast} from 'antd-mobile'
import HomeCommon from 'pages/home/HomeCommon'

const OtherItem=(props)=>{
        return (
            <div onClick={props.loginOut}>
               <i className={'fa '+props.icon}></i>
                <span>{props.text}</span>
                <em className="fa fa-angle-right"></em>
            </div>
        )
}
const MoneyItem=(props)=>{
    return (
        <div>
            <span>{props.text}</span>
        </div>
    )
}
const Item=(props)=>{
    return (
            <div>
                <i className={'fa '+props.icon}></i>
                <span>{props.text}</span>
            </div>
            )
}
class Mine extends Component{
constructor(){
    super()
    this.state={
        fn_tabs:[
            {
                id:1,
                text:'待付款',
                icon:'fa-credit-card'
            },
            {
                id:2,
                text:'待收货',
                icon:'fa-inbox'
            },
            {
                id:3,
                text:'待评价',
                icon:'fa-comment-o'
            },
            {
                id:4,
                text:'退货/退款',
                icon:'fa-undo'
            }
        ],
        money_tabs:[
            {
                id:1,
                text:'现金券'
            },
            {
                id:2,
                text:'红包'
            },
            {
                id:3,
                text:'聚美余额'
            },
            {
                id:4,
                text:'礼品卡'
            }
        ],
        other_tabs:[
            {
                id:1,
                text:'售后服务',
                icon:'fa-phone'
            },
            {
                id:2,
                text:'意见反馈',
                icon:'fa-envelope-open-o'
            },
            {
                id:3,
                text:'收货地址',
                icon:'fa-bus'
            },
            {
                id:4,
                text:'退出登录',
                icon:'fa-share',          
            },
            {
                id:5,
                text:'400-123-8888',
                icon:'fa-whatsapp'
            },
        ]
        
    }
}
renderItem(){
    return this.state.fn_tabs.map(item=><Item {...item} key={item.id}></Item>)
}
renderMoneyItem(){
    return this.state.money_tabs.map(item=><MoneyItem {...item} key={item.id}></MoneyItem>)
}
renderOtherItem(){
    return this.state.other_tabs.map((item,index)=><OtherItem {...item} key={item.id}
        loginOut={()=>this.loginOut(index)}></OtherItem>)
}
loginOut(index){
    if(index===3){
        const ls_user = cookie.get('user')
        if(ls_user){
            cookie.remove('user');
            this.props.history.push('/mine')
            document.location.reload()
        }else{     
            Toast.offline('您还未登录', 2);
        }    
    }
 }  

 componentDidMount(){
     this.bscroll = new BScroll(this.mineContent,{
         click:true,
         mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
           }
        })
        this.props.change_title('我的聚美')
 }  


    render () {
        return (

            <MineStyle ref={el=>this.mineContent =el}>
               <MineContainer>
                <MineContainerTop>
                   <MineContainerTopLogo>
                        <i className="fa fa-user-o"></i>
                   </MineContainerTopLogo>
                    
                  
                    <MineContainerTopLink>
                        <Link to="/mine/register">注册</Link>
                            <em>|</em>
                        <Link to="/mine/login"  >登录</Link>
                    </MineContainerTopLink>
                </MineContainerTop>
                <MineContainerMid>
                    <div className="Mid-one">
                        <div className="Mid-one-top">
                            <i className="fa fa-calendar"></i>
                            <span className="order-list">我的订单</span>
                            <span className="look-list">查看我的全部订单<i className="fa fa-angle-right"></i></span>
                        </div>
                        <div className="Mid-one-bot">
                            {this.renderItem()}
                        </div>
                    </div>
                    <div className="Mid-two">
                        <div className="Mid-two-top">
                                <i className="fa fa-usd"></i>
                                <span className="order-list">我的资产</span>
                        </div>
                        <div className="Mid-two-bot">
                            {this.renderMoneyItem()}
                        </div>
                    </div>
                </MineContainerMid>
                <MineContainerFooter>
                    <div className="bot-top">
                        {this.renderOtherItem()}
                    </div>  
                    <div className="bot-bot">
                        <div className="bot-title">
                            <p>客服热线400-123-8888 (8:00-22:00)</p>
                            <p>拨打前请记录您的UID 0</p>
                        </div>
                        
                     </div>                 
                </MineContainerFooter>
             
                </MineContainer>
            </MineStyle>

        )
    }
}

export default HomeCommon(Mine)